<!DOCTYPE html>
<html>

<head>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/layui/css/layui.css" media="all">
  <script src="/layui/layui.all.js"></script>
  <script src="/javascripts/jquery-3.3.1.min.js"></script>
</head>

<body>
  <div class="layui-row" style="height:100px"></div>
  <div class="layui-row">
    <div class="layui-col-lg-offset2 layui-col-lg8">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">邀请码</label>
          <div class="layui-input-block">
            <input type="text" name="phone" id="phone" required lay-verify="required" placeholder="请输入邀请码" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">微信昵称</label>
          <div class="layui-input-block">
            <input type="text" name="name" id="name" required lay-verify="required" placeholder="请输入微信昵称" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">ETH</label>
            <div class="layui-input-block">
              <input type="text" name="name" id="eth" required lay-verify="required" placeholder="请输入ETH地址" autocomplete="off" class="layui-input">
            </div>
          </div>
        <div class="layui-inline" style="margin-left: 10px">
          <button class="layui-btn" onclick="select()">查询</button>
        </div>
      </div>
    </div>
    <div class="layui-row">
      <div class="layui-col-lg-offset2 layui-col-lg8">
        <table id="demo" lay-filter="test"></table>
      </div>
    </div>
    <script>
      var url = "/user"
      var table = layui.table;
      //第一个实例
      table.render({
        elem: '#demo'
        , height: 500
        , width: 1000
        , url: url //数据接口
        , page: true //开启分页
        , method: 'post'
        , limit: 10
        , limits: [10]
        , cols: [[ //表头
          { field: 'ROW_ID', title: 'ID', width: 100, sort: true, fixed: 'left', align: 'center' }
          , { field: 'WECHAT_NAME', title: '微信昵称', width: 150, align: 'center' }
          , { field: 'ETH_ADDRESS', title: 'ETH地址', width: 200, align: 'center' }
          , { field: 'INVITE_CODE', title: '邀请码', width: 100, align: 'center' }
          , { field: 'AWARD_NUM', title: '奖励总数', width: 100, align: 'center' }
          , { field: 'PARENT_INVITE_WECHAT_NAME', title: '邀请人', width: 142, align: 'center' }
          , { field: 'CREATE_TIME', title: '提交时间', width: 200, align: 'center' }
        ]]
      });
      function select() {
        url = "/user";
        var name = $("#name").val();
        var phone = $("#phone").val();
        var eth = $("#eth").val();
        var data = {};
        if (name !== "") {
          data.name = name;
        }else{
          data.name = null;
        }
        if (phone !== "") {
          data.inviteCode = phone;
        }else{
          data.inviteCode = null;
        }
        if (eth !== "") {
          data.eth = eth;
        }else{
          data.eth = null;
        }
        table.reload('demo', {
          url: url
          , where: data //设定异步数据接口的额外参数
        });
      }
    </script>
</body>

</html>